<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
    em,相对于当前对象内⽂本的字体尺⼨。如果当前⾏内⽂本的字体尺⼨未被
⼈为设置，则相对于浏览器的默认字体尺⼨(默认16px)。(相对⽗元素的字体⼤⼩倍数),当你需要根据某个特定元素的字体大小来调整其子元素的尺寸时非常有用。例如，在设计导航菜单或卡片式布局时，你可以通过调整父元素的字体大小来动态地改变所有子元素的尺寸。
在需要创建响应式排版时，em 可以帮助你实现基于文本内容的比例缩放效果。

    rem是CSS3新增的⼀个相对单位，相对于根元素（html元素）的font-size的倍数。作⽤：
利⽤rem可以实现简单的响应式布局，可以利⽤html元素中字体的⼤⼩与屏幕间的⽐值来设置fontsize的值，以此实现当屏幕分辨率变化时让元素也随之变化。
    -->
    <div class="div1">恭喜发财</div>
    <div class="div2">恭喜发财</div>
    <div class="div3">恭喜发财</div>
    <div class="div4">恭喜发财</div>

    <div class="div5">
        <div class="div6"></div>
        <div class="div7"></div>
    </div>
</body>
<style>
    html{
        color: red;
        /* 16 是默认的  下面设置多少px就是1rem的值 */
        font-size: 32px; 
    }
    .div1 {
        font-size: 1rem;
    }
    .div2 {
        font-size: 2rem;
        /* 16 * 2px */
    }
    .div3 {
        font-size: 3rem;
    }
    .div4 {
        font-size: 3rem;
    }

    .div5 {
        background: lightblue;
        font-size: 20px;
        /* 1em就是 20px */
        height: 10em;
        width: 10em;
    }

    .div6 {
        background: lightpink;
        /* em 还是相对于 父元素20px */
        height: 5em;
        width: 5em;
    }

    .div7 {
        background: lightgreen;
        height: 100px;
        width: 100px;
    }
</style>
</html>